<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <span @click="fn.back()" class="mui-action-back"><img class="back-btn" src="../../../../static/images/back.png"></span>
        <div class="header-search flex-center">会议查阅情况</div>
        <div @click="save()" class="header-right-btn flex-center">设为已通知</div>
      </div>
    </header>
    <div id="slider" class="mui-slider mui-fullscreen">
      <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="consult-tab flex-justify-start">
          <a @click="showSign('1')" href="javascript:void(0)" :class="{'mui-active':opengFlag=='1'}" class="mui-control-item">已查阅人员（{{getListByFlag(1).length}}）</a>
          <a @click="showSign('0')" href="javascript:void(0)" :class="{'mui-active':opengFlag=='0'}" class="mui-control-item">未查阅人员（{{getListByFlag(0).length}}）</a>
        </div>
      </div>
      <div class="mui-slider-group">
        <!-- ---------已查阅人员---------start -->
        <div id="alreadyConsult" class="mui-slider-item mui-control-content mui-active">
          <div id="scroll1" class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <ul class="message-details people-lists" v-if="data.insPartyMeetingLogResponseModelList">
                <li @click="selected(item)" v-if="opengFlag==item.opengFlag" :class="{'people-select':selectedIndexOf(item)>-1}" v-for="item in data.insPartyMeetingLogResponseModelList" class="flex-justify-start ">
                  <div class="people-lists-touxiang"></div>
                  <p>{{item.userName}}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- ---------已查阅人员---------end -->
      </div>
    </div>

  </div>
</template>

<script>
  import footerbar from '../common/footerbar.vue'
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import moment from 'moment'
  export default {
    components: {
      footerbar
    },
    name: '',
    data () {
      return {
        allCheck: false,
        opengFlag: '1',
        fn: tools,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        list: [],
        selectedList: [],
        data: this.$store.state.scheduleDetail,
        modelName: '',
        swipeData: [],
        infinite: true,
        pageIndex: 0
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      selected (item) {
        let index = this.selectedIndexOf(item)
        if (index >= 0) {
          this.selectedList.splice(index, 1)
        } else {
          this.selectedList.push(item)
        }
      },
      // 获取IDs
      getSelectIds (_list) {
        let list = []
        _list.forEach((v) => {
          list.push(v.userId)
        })
        return list.join(',')
      },
      showSign (flag) {
        this.selectedList = []
        this.opengFlag = flag
      },
      selectedIndexOf (item) {
        let index = -1
        this.selectedList.some((v, i) => {
          if (item.id === v.id) {
            index = i
            return false
          }
        })
        return index
      },
      getListByFlag (flag) {
        let list = []
        this.data.insPartyMeetingLogResponseModelList.forEach((v, index) => {
          if (v.opengFlag == flag) {
            list.push(v)
          }
        })
        return list
      },
      save () {
        let meetingId = this.$route.params.pkId
        let userIds = this.getSelectIds(this.selectedList)
        loginService.setPartyMemberRead(meetingId, userIds).then((res) => {
          if (res.code === 200) {
            this.loadData()
          }
        })
      },
      loadData () {
        let pkId = this.$route.params.pkId
        loginService.getPubsherMeetingInfoByPkId(pkId).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.$store.state.scheduleDetail = this.data = res.data
        })
      }
    }
  }
</script>
